<template>
  <page-body bgImg=' ' safeAreaLeft>
    <view class="contact pages font-B ">
      <nav-bar :title='title' :backBtn='false' titleColor='#333'>
        <view slot="left" class="font-B font-14 c-008399" @tap="back()">取消</view>
        <view slot="right" class="font-B font-14 c-008399" @tap='addFamily'>完成</view>
      </nav-bar>
      <view class="jh-flex-center" style="width: 100%;height: calc(100vh - 50px);">
        <view class="contact-left jh-flex-center jh-column" @tap="chooseImage">
          <image class="contact-left-img" :src="avatar || form.avatar || ossDomain + '/addressBook-edit-avatar.png'"></image>
          <view class="c-008399 font-14 jh-line-height padding-16">{{editId ? '更换头像':'添加头像'}}</view>
        </view>
        <view class="contact-right">
          <input class="contact-item n-b font-16 font-B c-333" v-model="form.first_name" placeholder="姓氏" placeholder-class="c-999"/>
          <input class="contact-item font-16 font-B c-333" v-model="form.last_name" placeholder="名字" placeholder-class="c-999"/>
          <view style="height: 18px;"></view>
          <!-- <view class="contact-item n-b jh-align-center">
            <view class="contact-item-tool1 jh-align-center jh-space-between">
              <image style="width: 24px;height: 24px;display: block;" :src="ossDomain + '/icon-del.png'"></image>
              <view class="font-16 c-008399">手机</view>
              <image style="width: 10px;height: 16px;display: block;" :src="ossDomain + '/icon-bg2.png'"></image>
            </view>
            <view class="font-19 font-M c-008399 padding-l20">
              {{'13000000000' | changPhone}}
            </view>
          </view> -->
          <input class="contact-item font-16 font-B c-333" v-model="form.mobile" placeholder="电话" placeholder-class="c-999" type="number" maxlength="11"/>
          <!-- <view class="contact-item jh-align-center">
            <view>
              <image style="width: 24px;height: 24px;display: block;" :src="ossDomain + '/icon-add2.png'"></image>
            </view>
            <input class="contact-item-tool2 font-16 font-B c-008399" v-model="form.mobile" placeholder="电话" placeholder-class="c-999" type="number" maxlength="11"/>
          </view> -->
          <view style="height: 18px;"></view>
          <input class="contact-item font-16 font-B c-333" v-model="form.remark" placeholder="备注" placeholder-class="c-999"/>
        </view>
      </view>
    </view>
    <backBtn></backBtn>
  </page-body>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import backBtn from '@/components/back-btn/back'
  export default {
    components: {
      backBtn
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        title: '联系人',
        version: '1.0.0',
        avatar: '',
        editId: '',
        form: {
          mobile: '',
          avatar: '',
          first_name: '',
          last_name: '',
          remark: ''
        }
      }
    },
    filters: {
      changPhone (phone) {
        let str = String(phone)
        if (str.length == 11) {
          return str.replace(/^(.{3})(.*)(.{4})$/, '$1 $2 $3')
        }
        return phone
      }
    },
    onLoad({id}) {
      if (id) {
        this.editId = id
        this.title = '编辑联系人'
        this.$http.getFamily().then(res => {
          this.form = res.data.find(e => {
            return e.id == id
          })
        })
      }
      // #ifdef APP-PLUS
      // 手机品牌
      plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
        this.version = wgtinfo.version
      });
      // #endif
      // #ifdef MP-WEIXIN
      this.version = wx.getAccountInfoSync().miniProgram.version
      //#endif
    },
    methods: {
      back () {
        uni.navigateBack()
      },
      addFamily () {
        console.log(this.form);
        let {mobile,first_name,last_name} = this.form
        let msg = ''
        if (!mobile) {
          msg = '请输入联系人电话'
        }
        if (!first_name) {
          msg = '请输入联系人姓氏'
        }
        if (!last_name) {
          msg = '请输入联系人名字'
        }
        if (msg) {
          return uni.showToast({
            title: msg,
            icon: 'none'
          })
        }
        if (this.avatar) {
          this.form.avatar = this.avatar
        }
        let fn = this.$http.addFamily
        if (this.editId) {
          fn = this.$http.updateFamily
          this.form.family_id = this.editId
        }
        fn(this.form).then(res => {
          uni.showToast({
            title: this.editId ? '修改成功' : '添加成功'
          })
          setTimeout(()=>{
            uni.navigateBack()
          },2000)
        })
      },
      chooseImage () {
        uni.chooseImage({
          count:1,
          success: (e) => {
            this.changAvatar(e.tempFilePaths[0])
          }
        })
      },
      changAvatar (e) {
        this.$http.getUploadToken().then(res => {
          let data = res.data.token
          uni.$uploadUrl = {
            key: data.dir+(new Date()).getTime()+'.png',
            token: data.token,
            url: data.upload_url.upload_url
          }
          let {key, token, url} = uni.$uploadUrl
          uni.uploadFile({
            url: url,
            filePath: e,
            header: {
              appType: '3',
              version: this.version,
              sm: '',
              KaToken: uni.getStorageSync('KaToken')
            },
            name: 'file',
            formData: {
              key,
              token,
            },
            success: res => {
              uni.hideLoading()
              try {
                let _data = JSON.parse(res.data);
                _data = _data.data[0]
                uni.$navigateTo('/pages/cropper-default/cropper-default?src=http://'+ _data.url)
              } catch (e) {
                uni.showToast({
                  title: '上传失败'
                })
              }
            },
            fail: err => {
              uni.hideLoading()
            }
          });
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pages{
    width: 100%;
    height: 100vh;
    padding:0 30px;
    box-sizing: border-box;
  }
  .contact{
    &-left{
      
      &-img{
        width: 143px;
        height: 143px;
        display: block;
        border-radius: 50%;
      }
    }
    &-right{
      margin: 0 24px;
      width: calc(100% - 224px);
      position: relative;
    }
    &-item{
      width: 100%;
      height: 53px;
      border: 1px solid #ddd;
      background-color: #fff;
      padding-left: 24px;
      &.n-b {
        border-bottom: 0;
      }
      &-tool1{
        height: 100%;
        width: 116px;
        padding-right: 16px;
        border-right: 1px solid #F4F5F5;
        box-sizing: border-box;
      }
      &-tool2{
        padding-left: 16px;
        width: 406px;
        height: 100%;
      }
    }
  }
</style>
